<script lang="ts" setup>
import { h, reactive } from 'vue'
import XyIcon from '@/components/XyIcon'
const formList = reactive<FormList>([
  {
    label: 'input框',
    prop: 'input1',
    type: 'input',
    value: '默认值',
    autofocus: true,
    onChange() {},
    onInput() {},
    placeholder: '请输入姓名',
    rule: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    prepend: ({ c }) => h('div', c.label),
    append: '123',
    header: () => h(XyIcon, { icon: 'ep:user-filled' }),
    footer: () => h('div', { style: { color: 'var(--el-color-success-light-5)' } }, '姓名尾部'),
    description: '解释文案'
  }
])
const submitForm = (formData: FormEventParams) => {
  console.log(formData)
}
</script>
<template>
  <XyAddForm isCard :formList="formList" @submit-form="submitForm" />
</template>
